<template>
  <el-container>
    <!-- 企业信息区块 -->
    <div class="enterprise-section">
      <!-- 屠宰信息区块 -->
      <div class="enterprise-section">
        <div class="section-header">
          <h3 class="section-title blue-title">屠宰信息</h3>
          <el-button plain @click="handleSetting">设置</el-button>
        </div>

        <!-- 企业详细信息 -->
        <div class="enterprise-details">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <label>公司名称：</label>
                <span class="info-content">四川锦祥食品有限公司</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>成立时间：</label>
                <span class="info-content">2016年7月18日</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="info-item">
                <label>公司地址：</label>
                <span class="info-content">四川省巴中市湛江县XXX</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="info-item">
                <label>公司简介：</label>
                <div class="description-content">
                  企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 相关资质区块 -->
        <div class="photo-section">
          <h3 class="section-title blue-title">相关资质</h3>
          <div style="margin-top: 25px;"> <el-upload v-model:file-list="fileList" action="#" list-type="picture-card"
              :limit="9" :auto-upload="false">
              <el-icon class="upload-icon">
                <Plus />
              </el-icon>
            </el-upload></div>

        </div>
      </div>
      <div class="section-header">
        <h3 class="section-title blue-title">企业信息</h3>
        <el-button plain @click="handleSetting">设置</el-button>
      </div>

      <!-- 企业详细信息 -->
      <div class="enterprise-details">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>公司名称：</label>
              <span class="info-content">四川锦祥食品有限公司</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>成立时间：</label>
              <span class="info-content">2016年7月18日</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>公司地址：</label>
              <span class="info-content">四川省巴中市湛江县XXX</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>公司简介：</label>
              <div class="description-content">
                企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 企业照片区块 -->
      <div class="photo-section">
        <h3 class="section-title blue-title">企业照片</h3>
        <div style="margin-top: 25px;"> <el-upload v-model:file-list="fileList" action="#" list-type="picture-card"
            :limit="9" :auto-upload="false">
            <el-icon class="upload-icon">
              <Plus />
            </el-icon>
          </el-upload></div>
      </div>
    </div>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([])

const handleSetting = () => {
  // 这里可以添加设置按钮点击后的逻辑
  console.log('设置按钮被点击')
}
</script>

<style scoped>
.page-container {
  font-family: 'Microsoft YaHei', sans-serif;
  background: #f5f7fa;
  padding: 20px;
}

.main-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  gap: 10px;
  /* 设置元素之间的间距 */
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
  margin: 0;
}

.blue-title {
  color: #409EFF;
  /* 设置标题文字颜色为和参考代码一致的蓝色 */
}

.setting-button {
  margin-left: 10px;
  /* 调整按钮与文字的距离 */
  padding: 8px 15px;
}

.enterprise-details {
  margin: 20px 0;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}

.info-item label {
  flex: 0 0 80px;
  color: #606266;
  font-size: 14px;
}

.info-content {
  flex: 1;
  color: #303133;
  font-size: 14px;
  word-break: break-all;
}

.description-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.photo-section {
  margin-top: 30px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
  margin-bottom: 25px;
}

.upload-icon {
  font-size: 24px;
  color: #909399;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
}
</style>